<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>品牌案例</title>

    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <style>


        table {
            border: solid 1px #ccc;
            width: 80%;
            text-align: center;

        }

        table th {
            border: solid 1px #ccc;
            line-height: 30px;
        }

        table tr {
            border: solid 1px #ccc;
            line-height: 30px;
        }

        table td {
            border: solid 1px #ccc;
        }
    </style>
</head>


<body>
<div id="app">

    <a href="brandInfoVue.html">
        <button id="add">新增</button>
    </a>
    <hr>

    <table cellpadding="0" cellspacing="0" align="center">

        <thead>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
        </thead>

        <tbody id="tbody">


        <tr v-for="(brand,i) in brandList">
            <td>{{i + 1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.status}}</td>
            <td>
                <a  v-on:click="hendledit(brand.id)"> <button>修改</button></a>
                <button v-on:click="deleteBrand(brand.id)">删除</button>
            </td>

        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

<script>

    var vm = new Vue(
        {
            el: '#app',
            data: {
                brandList: []
            },
            methods: {
                //查询数据列表
                getBrandAll() {
                    axios(
                        {
                            url: '/brand-case/BrandAllServlet',
                            method: 'get'

                        }).then((resp) => {

                        this.brandList = resp.data
                    })
                },
                deleteBrand(id)
                {

                    //发送删除请求
                    axios({url:'/brand-case/BrandDelServlet?id='+id,method: 'get'})
                        .then( (resp)=>{
                            if(resp.data == "OK")
                            {
                                //重新加载数据
                                this.getBrandAll()
                            }else{

                                alert('删除失败!!!');
                            }
                        })


                },
                hendledit(id)
                {

                    location.href='brandInfoVue.html?id='+id
                }


            },
            mounted() {


                //加载数据
                this.getBrandAll()
            }
        }
    )

</script>